import 'package:flutter/material.dart';

class TabbarSelector extends StatefulWidget {

  final List<Widget> children;
  final List<Widget> selectedChildren;
  final Function(int selected) onPress;
  int index;
  TabbarSelector({Key key, this.selectedChildren, this.children, this.onPress, this.index}) : super(key: key);

  @override
  _TabbarSelectorState createState() => _TabbarSelectorState();
}

class _TabbarSelectorState extends State<TabbarSelector> with SingleTickerProviderStateMixin {

  Widget _createFlex(Widget child) {
    final size = MediaQuery.of(context).size;
    final margin = MediaQuery.of(context).padding;
    return Container(
      width: size.width / widget.children.length,
      child: child,
    );
  }

  _onIconPressed(int index) async {
    // 首先重置弧度的位置
    setState(() {
      widget.index = index;
    });
    widget.onPress(index);
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final margin = MediaQuery.of(context).padding;
    final height = 50 + margin.bottom;
    return Container(
      height: height,
      alignment: Alignment.topCenter,
      decoration: BoxDecoration(
        boxShadow: [
          BoxShadow(blurRadius: 10.0, spreadRadius: -5, color: Colors.black26)
        ]
      ),
      child: Stack(
        overflow: Overflow.visible,
        children: [
          CustomPaint(
          size: Size(size.width, height),
          painter: WaveTabbar(
            index: 2,
            valY: 0.25,
            circleRadiusOffset: 10,
            color: Colors.white,
            childrenCount: widget.children.length,
            dividerColor: Colors.black12
          ),),
          Container(
            height: height,
            padding: EdgeInsets.only(bottom: margin.bottom / 3),
            color: Colors.white,
            alignment: Alignment.topCenter,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: List.generate(widget.children.length, (index) => GestureDetector(
                child: widget.index == index ? _createFlex(widget.selectedChildren[index]) : _createFlex(widget.children[index]),
                onTap:() => _onIconPressed(index),
              )),
            ),
          ),
        ],
      ),
    );
  }
}

class WaveTabbar extends CustomPainter {
  final int index;
  final double valY;
  final Color color;
  final int childrenCount;
  final Color dividerColor;
  final double circleRadiusOffset;

  WaveTabbar({
    this.index, 
    this.valY, 
    this.color, 
    this.childrenCount,
    this.dividerColor = Colors.black12,
    this.circleRadiusOffset = 0
  });

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
    ..color = color
    ;
    

    final double circleHeight = size.height + circleRadiusOffset;
    final double circleWiddth = circleHeight * 1.3;
    final circleY = -valY * circleHeight;
    // 计算间距
    double distance = (size.width / childrenCount - circleWiddth) / 2.0;
    // 绘制圆
    Path path = Path()
    ..addOval(Rect.fromLTWH((size.width) / childrenCount * index + distance, circleY, circleWiddth, circleHeight));
    Shadow shadow = BoxShadow(blurRadius: 10.0, color: Colors.black26);
    var paint3 = shadow.toPaint();
    canvas.drawPath(path, paint3);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(WaveTabbar oldDelegate) {
    return false;
  }

}